<template>
    <div>
        <el-button type="success" @click="pay">支付弹窗</el-button> 
        <!-- 弹窗 -->
        <el-dialog  top="8vh" width="70%"  custom-class="dialog-show" :visible.sync="dialogFormVisible" >
          <div style='display:flex;'>
            <!-- 左侧区域 -->
            <div class="pay-area" style="background-color:#fff;">
                <!-- position:absolute;width:1000px;left:0px; -->
                <div class="pay-posi"><span style="font-weight:bold;">大厅A01结账</span>   <span style="color:#666;font-size:20px;">X</span></div>
                <!-- 订单信息表格 -->
                <table class='pay-tb'>
                    <thead>
                        <tr>
                            <th>订单号</th>
                            <th>菜单名</th>
                            <th>菜品</th>
                            <th>菜品数</th>
                            <th>付款状态</th>
                            <th>金额</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>D18762234354</td>
                            <td>菜单1-服务员下单</td>
                            <td>红烧肉等</td>
                            <td>6份</td>
                            <td>线上已付</td>
                            <td>￥164</td>
                        </tr>
                        <tr>
                            <td>D18762234354</td>
                            <td>菜单1-服务员下单</td>
                            <td>红烧肉等</td>
                            <td>6份</td>
                            <td>线上已付</td>
                            <td>￥164</td>
                        </tr>
                    </tbody>
                </table>
                <!-- 中间付款金额 -->
                <div class="pay-momeny">
                    <div>总计应付￥15</div>
                    <div>已付</div>
                    <div>本次需支付</div>
                    <div class="pay-update" @click="payUpdate">需要修改订单？请点击修改</div>
                </div>
                <!-- 选择支付方式 -->
                <div class="pay-select">
                    <div class="pay-sel-product">{{payStatus==1?'选择支付方式':'请选择退款方式'}}</div>
                    <el-radio-group v-model="radio" v-if="payStatus==1">
                        <el-radio :label="2">银行卡支付</el-radio>
                        <el-radio :label="4">支付宝支付</el-radio>
                        <el-radio :label="6">微信支付</el-radio>
                        <el-radio :label="8">现金支付</el-radio>
                    </el-radio-group>
                    <el-radio-group v-model="radio" v-else>
                        <el-radio :label="2">支付宝原路退款</el-radio>
                        <el-radio :label="4">线下退款</el-radio>
                    </el-radio-group>
                    <!-- 输入金额 -->
                    <div class="pay-how-much">
                        <span>输入金额</span>
                        <el-input v-model="input"  style="width:415px;"></el-input>
                    </div>
                    <div class="pay-tip">
                        <span>备注</span>
                        <el-input v-model="input2" style="width:415px;"></el-input>
                    </div>
                    <!-- 确定 -->
                    <div class="pay-sure-btn">
                        <!-- 留一块空白区域，固定按钮的位置 -->
                        <span></span>
                        <p style="display:inline-block">确定</p>
                    </div>
                </div>
                <!-- 付款信息 -->
                <div class="pay-msg">付款信息</div>
                <table class='pay-tb'>
                    <thead>
                        <tr>
                            <th>支付订单号</th>
                            <th>付款时间</th>
                            <th>支付方式</th>
                            <th>支付账户</th>
                            <th>备注</th>
                            <th>付款金额</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>D18762234354</td>
                            <td>04.23-16:09</td>
                            <td>支付宝支付</td>
                            <td>172****2244</td>
                            <td>/</td>
                            <td>￥164</td>
                        </tr>
                        <tr>
                            <td>D18762234354</td>
                            <td>04.23-16:09</td>
                            <td>支付宝支付</td>
                            <td>172****2244</td>
                            <td>/</td>
                            <td>￥164</td>
                        </tr>
                    </tbody>
                </table>
                <!-- 总计付款 -->
                <div class="pay-total">总计付款  <span>￥164</span>  </div>
                <!-- 确认结账完毕 -->
                <div class="pay-is-success">
                    <p>确认结账完毕</p>
                </div>
            </div> 
            <!-- 右侧 -->
            <div v-if="payRightArea" class="pay-right-area" style="background-color:#fff;width:25.6%;position:relative;">
                <!-- 订单1 -->
                <div class="pay-dish-list">
                    <div class="pay-node">D18762234354</div>
                    <!-- 商品1 -->
                    <div class="pay-dish">
                        <div class="pay-dish-name">麻婆豆腐</div>
                        <div class="menu-list-right">
                            <i class="el-icon-remove-outline" ></i>
                            <span >1</span>
                            <i class="el-icon-circle-plus"></i>
                        </div>
                    </div>
                    <!-- 商品2 -->
                    <div class="pay-dish">
                        <div class="pay-dish-name">红烧肉</div>
                        <div class="menu-list-right">
                            <i class="el-icon-remove-outline" ></i>
                            <span >1</span>
                            <i class="el-icon-circle-plus"></i>
                        </div>
                    </div>
                    <!-- 商品3 -->
                    <div class="pay-dish">
                        <div class="pay-dish-name">酸菜</div>
                        <div class="menu-list-right">
                            <i class="el-icon-remove-outline" ></i>
                            <span >1</span>
                            <i class="el-icon-circle-plus"></i>
                        </div>
                    </div>
                </div>
                <!-- 订单2 -->
                <div class="pay-dish-list">
                    <div class="pay-node">D18762234354</div>
                    <!-- 商品1 -->
                    <div class="pay-dish">
                        <div class="pay-dish-name">麻婆豆腐</div>
                        <div class="menu-list-right">
                            <i class="el-icon-remove-outline" ></i>
                            <span >1</span>
                            <i class="el-icon-circle-plus"></i>
                        </div>
                    </div>
                    <!-- 商品2 -->
                    <div class="pay-dish">
                        <div class="pay-dish-name">红烧肉</div>
                        <div class="menu-list-right">
                            <i class="el-icon-remove-outline" ></i>
                            <span >1</span>
                            <i class="el-icon-circle-plus"></i>
                        </div>
                    </div>
                    <!-- 商品3 -->
                    <div class="pay-dish">
                        <div class="pay-dish-name">酸菜</div>
                        <div class="menu-list-right">
                            <i class="el-icon-remove-outline" ></i>
                            <span >1</span>
                            <i class="el-icon-circle-plus"></i>
                        </div>
                    </div>
                </div>    
                <!-- 原始总金额以及按钮 -->
                <div class="pay-total-all">
                    <!-- 上按钮 -->
                    <div class="pay-all">
                        <div class="text-right">
                            <span>原始总金额</span> <span>￥23</span>
                        </div> 
                        <div class="text-right">
                            <span>修改后金额</span> <span class="pay-update-status">￥23</span>
                        </div>  
                    </div>
                    <!-- 下按钮 -->
                    <div class="dialog-btn-area">
                        <div class="dialog-btn-delete dialog-make-sure">删除</div>
                        <div class="dialog-btn-sure dialog-make-sure" @click="payChangeStatus">确 定</div>
                    </div>
                </div>
            </div>
          </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data () {
        return {
            dialogFormVisible: true,
            radio: 4,
            input: '',
            input2: '',
            payRightArea: false,
            payStatus: 1
        }
    },
    methods: {
        pay () {
            this.dialogFormVisible = true;
            console.log('pay')
        },
        payUpdate () {
            this.payStatus = 1;
            this.payRightArea = !this.payRightArea;
        },
        // 点击确定按钮选择退款方式
        payChangeStatus () {
            console.log('&&&&')
            this.payStatus = 2;
            this.payRightArea = !this.payRightArea;
        }
    }
}
</script>

<style scoped>
/deep/.el-dialog__wrapper .el-dialog__header {
    padding: 0;
}
/deep/.el-dialog__wrapper .el-dialog__body {
    padding: 0;
    color: #333;
}
/deep/.el-dialog__wrapper .el-dialog {
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0);
    background: rgba(0,0,0,0);
}
/* 把官方ui的x按钮隐藏掉 */
/deep/.el-dialog__wrapper .el-dialog__headerbtn .el-dialog__close {
    color: rgba(0,0,0,0);
}
.pay-area {
    border-right: 1px solid #CDCDCD;
    padding-right: 23px;
    width: 74.4%;
    padding-left: 20px;
}
.pay-posi {
    padding:18px 0;
    font-size: 18px;
    /* font-weight: bold; */
    border-bottom:1px solid #EFEFEF;
    display: flex;
    justify-content: space-between;
}
.pay-tb {
    border-collapse: collapse;
    width: 100%;
}
.pay-tb th {
    text-align: left;
    color: #666;
}
.pay-tb td, .pay-tb th {
    height: 30px;
    /* border: 1px solid violet; */
}
/* 总计应付 */
.pay-momeny {
    padding: 20px 0 23px 0;
    text-align: right;
    color: #666;
    border-top: 1px solid #EFEFEF;
    border-bottom: 1px solid #EFEFEF;
}
 /* 选择支付方式 */
 .pay-select {
    padding: 15px 0;
    border-bottom: 1px solid #EFEFEF;
 }
 .pay-sel-product {
    margin-bottom: 20px;
 }
 .pay-how-much {
    margin: 20px 0 15px 0;
 }
 .pay-select span {
    display: inline-block;
    text-align: right;
    width: 60px;
    margin-right: 20px;
    /* border: 1px solid red; */
 }
 .pay-update {
     color: #FF6F2E;
     cursor: default;
 }
 /* 确定按钮 */
 .pay-sure-btn {
    margin-top: 20px;
    color: #FF6F2E;
 }
 /* 付款信息 */
 .pay-msg {
    margin: 15px 0; 
    color: #666;
 }
 /* 总计付款 */
.pay-total {
    border-top: 1px solid #EFEFEF;
    border-bottom: 1px solid #EFEFEF;
    padding: 20px 0;
    text-align: right;
 }
.pay-total span {
    font-size: 20px;
    font-weight: bold;
}
.pay-is-success p{
    width: 200px;
    height: 40px;
    border: 1px solid #FF6F2E;
    padding: 12px 52px;
    border-radius: 5px;
    background-color: #FFF1E5;
    color: #FF6F2E;
    margin: 30px auto;
}
/* 右侧 */
.pay-right-area {
    background-color:#fff;
    width:25.6%;
}
.menu-list-right span{
  font-size:16px;
  color:#333;
  margin:0 5px;
  position: relative;
  top:-2px;
}
.menu-list-right i  {
  font-size:22px;
  color:#FF6F2E
}
.pay-dish-list {
    padding: 27px 0;
    border-bottom: 1px solid #EFEFEF;
}
.pay-node {
    padding-left: 25px;
}
.pay-dish {
    display: flex;
    padding: 0 25px;
    margin:9px;
}
.pay-dish-name {
    flex: 1;
}
/* 需要支付总金额 */
.pay-total-all {
    padding: 0 25px;
    width: 100%;
    position: absolute;
    bottom: 0;
}
.pay-all {
    padding: 15px 0;
    border-top:1px solid #e7e7e7;
    border-bottom:1px solid #e7e7e7;
    box-sizing: border-box
}
.pay-all-btn {
    display: flex;
}
.pay-update-status {
    color: #333;
    font-size: 20px;
}
/* 对话框按钮 */
.dialog-btn-area {
  margin: 0 auto;
  margin: 30px 0;
  display: flex;
  justify-content: center;
}
.dialog-make-sure {
  display: inline-block;
  border: 1px solid #FF6F2E;
  width: 120px;
  height: 40px;
  color: #FF6F2E;
  background-color: #FFF1E5; 
  border-radius: 5px;
  text-align: center;
  line-height: 40px;
}
.dialog-btn-delete {
  margin-right: 35px;
}
</style>
